<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, reactive, toRefs} from "vue";
import type {User} from "@/models/user";
import {getUserInfoListByTags} from "@/api/UserApi";
import {closeToast, showFailToast, showLoadingToast, showSuccessToast, showToast} from "vant";
import UserCardList from "@/components/UserCardList.vue";

const route = useRoute();
console.log(route.query)

const mockUser: User = {
  id: 1,
  username: "张三",
  userAccount: "zhangsan",
  avatarUrl: "https://img.yzcdn.cn/vant/cat.jpeg",
  gender: 1,
  userPassword: "12345678",
  phone: "18135375594",
  email: "zhangsan@163.com",
  userRole: 1,
  createTime: new Date().toLocaleString(),
  tags: ["大一", "大二"],
  profile: "我是一个测试用户,啊吧啊吧阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴",

};

const state = reactive({
  userList: [] as User[],
})

const {userList} = {...toRefs(state)}
const getUserList = async () => {
  showLoadingToast('加载中...');
  const res = await getUserInfoListByTags(route.query.tags as string[]);
  console.log(res.data?.data);

  if (res.data?.code === 40101) {
    showToast('请登录后重试');
    return;
  }

  if (res.data?.code === 4000) {
    showFailToast('搜索失败！');
    return;
  } else {
    if (res.data?.data.length > 0) {
      userList.value = res.data?.data;
      showSuccessToast('搜索成功');
      closeToast();
      return;
    } else {
      showFailToast('暂无用户');
    }
  }
}

onMounted(async () => {
  await getUserList()
})


</script>

<template>
  <div>
    <div>
      <UserCardList  :user-list="userList"/>
    </div>
    <div v-if="userList.length < 1 || !userList">
      <van-empty image="search" description="暂无符合要求的用户" />
    </div>
  </div>

</template>

<style scoped>


</style>
